import { Scan } from "@nutui/icons-react-taro";
import Taro from "@tarojs/taro";
import {
  Button,
  Empty,
  Form,
  Loading,
  Overlay,
  SearchBar,
} from "@nutui/nutui-react-taro";
import { useRequest } from "ahooks";
import { useState } from "react";
import { searchBatteryApi } from "../../../servers/servers";
import BangDingDianChiForm from "./components/BangDingDianChiForm";
import "./index.less";
import bcPng from "../image/f742b9c0-91dd-4d61-866b-7547163425a6.png";

const jiebangdianchi = () => {
  const [form] = Form.useForm();

  // 查询结果
  const [result, setResult] = useState("");

  const {
    runAsync,
    data: batteryList,
    loading,
  } = useRequest(
    async (battery) => {
      if (!battery) {
        return [];
      }
      // 至少输入5个字符
      if (battery?.length < 6) {
        Taro.showToast({
          title: "请最少输入6位电池编码",
          icon: "none",
          duration: 5000,
        });

        return [];
      }

      const _res = await searchBatteryApi({
        battery: battery,
        status: 1,
      });

      return _res?.data?.rows;
    },
    {
      debounceWait: 300,
      manual: true,
    }
  );

  const [searchValue, setSearchValue] = useState("");

  const WrapperStyle = {
    display: "flex",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <>
      <Overlay visible={loading}>
        <div className="wrapper" style={WrapperStyle}>
          <Loading direction="vertical">加载中...</Loading>
        </div>
      </Overlay>

      <SearchBar
        autoFocus
        style={{
          "--nutui-searchbar-input-height": "100rpx",
        }}
        onChange={(_val) => {
          setSearchValue(_val);
        }}
        value={searchValue}
        left={
          <Scan
            onClick={() => {
              // 允许从相机和相册扫码
              Taro.scanCode({
                scanType: "qrCode",
                success: (res) => {
                  const pattern = /BT.*$/;

                  const match = res?.result?.match(pattern);
                  if (match) {
                    setSearchValue(match?.[0]);
                  } else {
                    Taro.showToast({
                      title: "请扫描正确的二维码",
                      icon: "none",
                      duration: 2000,
                    });
                  }

                  console.log(res);
                },
                errMsg: (_res) => {
                  console.log(_res);
                },
              });
            }}
          />
        }
        placeholder="输入电池编码后6位进行搜索"
        right={
          <Button
            type="primary"
            onClick={() => {
              runAsync(searchValue);
            }}
          >
            搜索
          </Button>
        }
        onSearch={(vales) => {
          runAsync(vales);
        }}
      />

      {batteryList &&
        batteryList?.length > 0 &&
        batteryList?.map((_item) => {
          return (
            <div
              key={_item?.batteryId + _item?.provinceId}
              style={{
                marginTop: 20,
              }}
            >
              <BangDingDianChiForm
                data={_item}
                onFinish={() => {
                  runAsync();
                }}
              />
            </div>
          );
        })}

      {(!batteryList || batteryList?.length === 0) && (
        <Empty
          title="请先输入电池编码或扫码进行搜索方可解绑"
          image={
            <img
              src={bcPng}
              alt=""
              style={{
                height: "69%",
              }}
            />
          }
        />
      )}
    </>
  );
};

export default jiebangdianchi;
